<template>
  <transition name="bounce" mode="out-in">
    <div class="mh-container">
      <mh-header headName="忘记密码"> </mh-header>
      <div class="mui-content">
        <form class="mui-input-group login-form">
          <div class="mui-input-row">
            <input type="text" class="mui-input-clear" v-model="phone" placeholder="请输入手机号" autocomplete="false">
          </div>
          <div class="mui-input-row">
            <input type="text" class="mui-input-clear" v-model="msgCode" placeholder="请输入验证码">
            <button v-if='codeFlag' type="button" class="captcha send-btn" @click='getCode'>获取验证码</button>
            <span v-else class="captcha code-time">重新获取{{time}}s</span>
          </div>
        </form>
        <div class="mui-content-padded lg-btn-box">
          <button type="button" id="nextStep" class="mui-btn-block mh-btn" data-loading-text = "下一步" @click="checkMsgCode">下一步</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header'
  import {MH_API} from "@/api/api";

  export default {
    name: "forgot-pwd",
    data () {
      return {
        phone: '',
        msgCode: '',
        codeFlag: true,
        time: 60
      }
    },
    methods: {
      getCode(){
        if (!this.phone) {
          mui.toast('请输入手机号');
          return false;
        }
        let self = this;
        MH_API.sendCode({
          phone: self.phone
        }).then(res => {
          if (res.code === 200) {
            self.codeFlag = false;
            mui.toast("发送成功");
            let time = self.time;
            let timer = setInterval(function(){
              --time;
              if(time==0){
                time = 60;
                clearInterval(timer);
                self.codeFlag = true;
              }
              self.time = time;
            }, 1000)
          }
        })
      },
      checkMsgCode () {
        if (!this.phone) {
          mui.toast('请输入手机号');
          return false;
        }
        if (!this.msgCode) {
          mui.toast('请输入验证码');
          return false;
        }
        let params = {
          phone: this.phone,
          msgCode: this.msgCode
        };
        MH_API.forgotPwd(params).then(res => {
          if (res.status === 200) {
            mui('#nextStep').button('reset');
            this.$router.push({path: '/account/newPassword'})
          }
        })
      }
    },
    components: {
      MhHeader
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../assets/css/mixin';
  .mui-content {background: #fff;}
  .captcha {
  @include ct;
    padding: 0;
    background: #e685aa;
    right: 1rem;
    border-radius: .5rem;
    color: #fff;
  &:hover {
     background: #e685aa;
   }
  }
  .send-btn {
    padding: .8rem 1rem;
  }
  .code-time{ display:inline-block; background-color:#ccc;padding: .8rem 1rem;}
  .mh-btn {margin-top: 4.5rem;}
</style>
